<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-see_qualification-container">
      <div class="see_qualification-header">
        <div class="see_qualification-t">
          <h5>共有5家企业参与预审</h5>
        </div>
        <div class="see_qualification-b">
          <ul>
            <!-- 待审核 -->
            <li class="pending">
              <span>1家</span>
            </li>
            <!-- 已通过 -->
            <li class="passed">
              <span>34家</span>
            </li>
            <!-- 带补全资料 -->
            <li class="pending_information">
              <span>8家</span>
            </li>
            <!-- 未通过 -->
            <li class="dis_not_pass">
              <span>11家</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="see_qualification-body">
        <div class="vm-see_qualification-item" v-for="n in 5">
          <div class="vm-see_qualification-item-content">
            <div class="vm-see_qualification-item-h">
              <h1>鲁南机床厂</h1>
            </div>
            <div class="vm-see_qualification-item-b">
              <p>2018-08-20 15:24:38</p>
            </div>
          </div>
          <div class="vm-see_qualification-item-f">
            <span>查看详情</span>
            <x-icon type="ios-arrow-forward" size="18" icon-success-color="red"></x-icon>
          </div>
          <i class="bgc-fixed-rightT tobeAudited"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import { bidding_prequalification } from '@/api/work_bench.js'
  export default {
    data() {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        bid: this.$route.query.bid
      }
    },
    created () {
      this.getPrequalification();
    },
    methods: {
      getPrequalification() {
        let bid = this.bid;
        bidding_prequalification({bid})
          .then(res => res.data)
          .then(data => {
            console.log(data);
          })
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
    },
  }
</script>

<style lang="scss" scoped>
  .vm-see_qualification-container {
    height: 100%;
    overflow: scroll;
    background-color: #f4f4f4;
    .see_qualification-header {
      .see_qualification-t {
        background-color: #fff;
        display: flex;
        align-items: center;
        padding-left: 30px;
        height: 70px;
        margin: 10px 0;
        & > h5 {
          font-size: 26px;
          color: #333333;
        }
      }
      .see_qualification-b {
        background-color: #fff;
        ul {
          display: flex;
          flex-wrap: wrap;
          padding: 20px 45px;
          justify-content: space-between;
          li {
            position: relative;
            width: 310px;
            height: 130px;
            margin-bottom: 20px;
            background-size: 100% 100% !important;
            span {
              position: absolute;
              left: 28px;
              bottom: 15px;
              font-size: 24px;
              color: #ffffff;
            }
            /*待审核*/
            &.pending {
              background: url("/static/images/pending.png") no-repeat;
            }
            /*已通过*/
            &.passed {
              background: url("/static/images/passed.png") no-repeat;
            }
            /*带补全资料*/
            &.pending_information {
              background: url("/static/images/pending_information.png") no-repeat;
            }
            /*未通过*/
            &.dis_not_pass {
              background: url("/static/images/dis_not_pass.png") no-repeat;
            }
          }
        }
      }
    }
    .see_qualification-body {
      margin: 30px;
      .vm-see_qualification-item {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-bottom: 30px;
        -webkit-border-radius: 20px; /* no */
        -moz-border-radius: 20px; /* no */
        border-radius: 20px; /* no */
        box-shadow: 0 5px 15px #dadada; /* no */
        position: relative;
        i.bgc-fixed-rightT {
          position: absolute;
          right: 0;
          top: 0;
          width: 108px;
          height: 108px;
          background-size: 100% 100% !important;
          display: inline-block;
          /* 已通过 */
          &.adopt {
            background: url("/static/images/adopt.png") no-repeat;
          }
          /* 不通过 */
          &.not_pass {
            background: url("/static/images/not_pass.png") no-repeat;
          }
          /* 已同意 */
          &.agree {
            background: url("/static/images/agree.png") no-repeat;
          }
          /* 不同意 */
          &.noagree {
            background: url("/static/images/noagree.png") no-repeat;
          }
          /* 已报价 */
          &.quotedPrice {
            background: url("/static/images/quotedPrice.png") no-repeat;
          }
          /* 待审核 */
          &.tobeAudited {
            background: url("/static/images/tobeAudited.png") no-repeat;
          }
        }



        .vm-see_qualification-item-content {
          padding: 0 40px 0 30px;
          .vm-see_qualification-item-h {
            display: flex;
            padding-top: 30px;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 25px;
            span {
              min-width: 200px;
              text-align: right;
            }
            h1 {
              font-size: 30px;
              line-height: 30px;
              flex: 1;
              text-align: left;
            }
          }
          .vm-see_qualification-item-b {
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            text-align: left;
            padding-bottom: 25px;
            border-bottom: 1px solid #eeeeee; /* no */
            p {
              color: #666666;
              font-size: 24px;
              line-height: 50px;
            }
          }
        }
      }
      .vm-see_qualification-item-f {
        padding: 0 40px 0 30px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #999999;
          font-size: 22px;
        }
      }
    }
  }
</style>
